<template>
	<view class="chat-page">
		<!-- 自定义导航栏 - 固定在顶部 -->
		<view class="custom-navbar fixed-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="navbar-content">
				<view class="nav-left" @click="goBack">
					<view class="back-button">
						<text class="back-icon">←</text>
					</view>
				</view>
				<view class="nav-center">
					<view class="ai-info">
						<image class="ai-avatar avatar-sm" src="/static/img/ai_avatar.png"></image>
						<view class="ai-details">
							<view class="ai-name">伊言一语</view>
							<view class="ai-status">{{ connectionStatus }}</view>
						</view>
					</view>
				</view>
				<view class="nav-right">
					<!-- 可以添加更多操作按钮 -->
				</view>
			</view>
		</view>

		<!-- 消息列表 -->
		<scroll-view 
			class="message-list" 
			scroll-y 
			:scroll-top="scrollTop"
			:style="{ height: messageListHeight + 'px' }"
			@scrolltoupper="loadMoreMessages"
		>
			<!-- 加载更多提示 -->
			<view v-if="loadingMore" class="loading-more">
				<text>加载更多消息...</text>
			</view>

			<!-- 欢迎消息 -->
			<view v-if="messages.length === 0" class="welcome-message">
			<view class="welcome-content">
				<image class="welcome-avatar avatar-lg" src="/static/img/ai_avatar.png"></image>
				<view class="welcome-text">
					<view class="welcome-title">您好，我是伊言一语</view>
					<view class="welcome-subtitle">我将为您提供专业的心理咨询服务，请告诉我您遇到的问题或困扰</view>
				</view>
			</view>
			</view>

			<!-- 消息列表 -->
			<view v-for="(message, index) in messages" :key="message.id" class="message-item">
				<!-- AI消息 - 头像在左侧 -->
				<view v-if="message.SendId === 0" class="message ai-message">
				<image 
					class="message-avatar avatar-md" 
					src="/static/img/ai_avatar.png" 
					mode="aspectFill"
					show-menu-by-longpress="false"
					@error="onImageError"
					@load="onImageLoad"
				></image>
					<view class="message-content">
						<view class="message-bubble ai-bubble" v-html="message.Content"></view>
						<view class="message-time">{{ formatMessageTime(message.CreateDateUtc) }}</view>
					</view>
				</view>

				<!-- 用户消息 - 头像在右侧 -->
				<view v-else class="message user-message">
					<view class="message-content">
						<view class="message-status">
							<text v-if="message.State === 0" class="status-sending">发送中</text>
							<text v-else-if="message.State === -1" class="status-failed" @click="resendMessage(message)">重发</text>
							<text v-else class="status-sent">已发送</text>
						</view>
						<view class="message-bubble user-bubble" v-html="message.Content"></view>
						<view class="message-time">{{ formatMessageTime(message.CreateDateUtc) }}</view>
					</view>
					<image 
						class="message-avatar avatar-md" 
						:src="userAvatar" 
						mode="aspectFill"
						show-menu-by-longpress="false"
						@error="onImageError"
						@load="onImageLoad"
					></image>
				</view>
			</view>

			<!-- AI正在输入提示 -->
			<view v-if="aiTyping" class="message ai-message">
				<image class="message-avatar avatar-md" src="/static/img/ai_avatar.png"></image>
				<view class="message-content">
					<view class="typing-indicator">
						<view class="typing-dots">
							<view class="dot"></view>
							<view class="dot"></view>
							<view class="dot"></view>
						</view>
						<text class="typing-text">正在思考中...</text>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 输入区域 -->
		<view class="input-area" :style="{ paddingBottom: safeAreaBottom + 'px' }">
			<view class="input-container">
				<view class="input-box">
					<textarea 
						v-model="inputText"
						placeholder="请输入您的问题..."
						:auto-height="true"
						:max-height="120"
						@focus="onInputFocus"
						@blur="onInputBlur"
						@input="onInput"
						class="input-textarea"
					></textarea>
				</view>
				<view class="send-btn" :class="{ active: canSend }" @click="sendMessage">
					<text class="send-icon">发送</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import io from '@hyoga/uni-socket.io';
import { SOCKETAPI } from '@/script/config.js';

export default {
	data() {
		return {
			consultationId: '',
			inputText: '',
			scrollTop: 0,
			statusBarHeight: 0,
			safeAreaBottom: 0,
			messageListHeight: 0,
			loadingMore: false,
			aiTyping: false,
			connectionStatus: '连接中...',
			reconnectAttempts: 0,
			maxReconnectAttempts: 5
		}
	},
	created() {
		// 将非响应式的数据挂载到 this 上
		this.socket = null;
		this.socketConnectTimeout = null;
	},
	computed: {
		messages() {
			return this.$store.state.consultation.messages;
		},
		canSend() {
			return this.inputText.trim().length > 0;
		},
		userAvatar() {
			const sender = this.$store.state.sender;
			const avatar = (sender && (sender.avatar || sender.Avatar)) || '/static/img/user_avatar.png';
			return avatar;
		}
	},
	onLoad(options) {
		this.consultationId = options.consultationId;
		if (!this.consultationId) {
			this.showError('咨询ID不能为空');
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
			return;
		}
		
		this.initPage();
		this.loadMessages();
	},
	onShow() {
		// 每次进入页面时，尝试连接
		this.connectWebSocket();
	},
	onHide() {
		// 离开页面时，断开连接
		this.disconnectWebSocket();
	},
	onUnload() {
		// 卸载页面时，断开连接
		this.disconnectWebSocket();
	},
	methods: {
		// 初始化页面
		async initPage() {
			// 获取系统信息
			const systemInfo = await this.getSystemInfo();
			this.statusBarHeight = systemInfo.statusBarHeight;
			this.safeAreaBottom = systemInfo.safeAreaInsets?.bottom || 0;
			
			// 计算消息列表高度
			this.calculateMessageListHeight();
		},

		// 获取系统信息
		getSystemInfo() {
			return new Promise((resolve) => {
				uni.getSystemInfo({
					success: resolve,
					fail: () => resolve({})
				});
			});
		},

		// 计算消息列表高度
		calculateMessageListHeight() {
			const query = uni.createSelectorQuery();
			query.select('.chat-page').boundingClientRect();
			query.exec((res) => {
				if (res[0]) {
					const pageHeight = res[0].height;
					const navbarHeight = this.statusBarHeight + 44; // 导航栏高度
					const inputAreaHeight = 80; // 输入区域高度
					this.messageListHeight = pageHeight - navbarHeight - inputAreaHeight - this.safeAreaBottom;
				}
			});
		},

		// 加载消息
		async loadMessages() {
			try {
				await this.$store.dispatch('consultation/fetchMessages', {
					consultationId: this.consultationId,
					params: { page: 1, limit: 50 }
				});
				this.scrollToBottom();
			} catch (error) {
				console.error('加载消息失败:', error);
				this.showError('加载消息失败');
			}
		},

		// 加载更多消息
		async loadMoreMessages() {
			if (this.loadingMore) return;
			
			this.loadingMore = true;
			try {
				// 这里可以实现分页加载历史消息
				await new Promise(resolve => setTimeout(resolve, 1000));
			} catch (error) {
				console.error('加载更多消息失败:', error);
			} finally {
				this.loadingMore = false;
			}
		},

		// 发送消息
		async sendMessage() {
			if (!this.canSend) return;

			const content = this.inputText.trim();
			const tempId = Date.now(); // 使用临时ID，以便在发送失败时更新状态

			// 1. 统一进行乐观UI更新
			const userMessage = {
				id: tempId,
				Content: content,
				SendId: JSON.parse(uni.getStorageSync('sender') || '{}').id,
				CreateDateUtc: new Date().toISOString(),
				State: 1 // 乐观地将状态设置为“已发送”
			};
			this.$store.commit('consultation/addMessage', userMessage);
			this.inputText = '';
			this.scrollToBottom();

			// 2. 根据连接状态选择发送方式
			if (this.socket && this.socket.connected) {
				// WebSocket 模式
				console.log('通过WebSocket发送消息:', {
					consultationId: this.consultationId,
					content: content,
					type: 0,
					tempId: tempId
				});
				
				// 显示AI正在输入状态
				this.aiTyping = true;
				
				this.socket.emit('sendMessage', {
					consultationId: this.consultationId,
					content: content,
					type: 0,
					tempId: tempId // 发送临时ID，便于服务器确认
				});
			} else {
				// HTTP 轮询模式 (降级方案)
				this.aiTyping = true;
				try {
					await this.$store.dispatch('consultation/sendMessage', {
						consultationId: this.consultationId,
						content: content,
						type: 0
					});

					// 发送成功后，刷新消息列表以获取AI回复
					setTimeout(() => {
						this.loadMessages();
						this.aiTyping = false;
					}, 500);

				} catch (error) {
					console.error('HTTP发送消息失败:', error);
					this.aiTyping = false;
					this.showError('发送失败，请重试');

					// 3. 如果HTTP发送失败，更新消息状态为“失败”
					this.$store.commit('consultation/updateMessageState', {
						messageId: tempId,
						state: -1
					});
				}
			}
		},

		// 重发消息
		async resendMessage(message) {
			// 更新消息状态为发送中
			this.$store.commit('consultation/updateMessageState', {
				messageId: message.id,
				state: 0
			});
			
			try {
				const content = message.Content.replace(/<[^>]*>/g, ''); // 移除HTML标签
				await this.$store.dispatch('consultation/sendMessage', {
					consultationId: this.consultationId,
					content: content,
					type: 0
				});
				
				// 更新消息状态为已发送
				this.$store.commit('consultation/updateMessageState', {
					messageId: message.id,
					state: 1
				});
				
			} catch (error) {
				console.error('重发消息失败:', error);
				this.$store.commit('consultation/updateMessageState', {
					messageId: message.id,
					state: -1
				});
				this.showError('重发失败，请重试');
			}
		},

		// 连接WebSocket
		connectWebSocket() {
			if (this.socket) return;

			// 清除旧的超时计时器
			if (this.socketConnectTimeout) {
				clearTimeout(this.socketConnectTimeout);
				this.socketConnectTimeout = null;
			}

			// 设置5秒连接超时，超时后自动降级
			this.socketConnectTimeout = setTimeout(() => {
				console.log('WebSocket连接超时，降级到轮询模式');
				this.fallbackToPolling();
			}, 5000);

			const token = uni.getStorageSync('token');
			const user = JSON.parse(uni.getStorageSync('sender') || '{}');

			try {
				// --- WebSocket URL配置 ---
				// 重要提示：
				// 1. 小程序平台强制要求使用 wss:// (加密) 协议。
				// 2. wss:// 对应的域名必须在小程序管理后台预先配置为"合法域名"。
				// 3. 'ws://localhost:9527' 仅能在浏览器(H5)环境下用于本地开发调试。
				//
				// 为了确保小程序端在后端WebSocket服务就绪前能正常工作（通过降级到HTTP轮询），
				// 此处暂时使用一个无效的wss地址。当您的后端服务部署后，请替换为真实的wss地址。
				const socketUrl = SOCKETAPI;

				this.socket = io(socketUrl, {
					query: {
						token: token,
						userId: user.id,
						consultationId: this.consultationId
					},
					transports: ['websocket'],
					timeout: 3000,
					forceNew: true
				});

				// 监听连接成功
				this.socket.on('connect', () => {
					clearTimeout(this.socketConnectTimeout); // 清除超时
					this.socketConnectTimeout = null;
					console.log('WebSocket连接成功');
					this.connectionStatus = '在线';
					this.reconnectAttempts = 0;
					this.stopMessagePolling(); // 如果之前在轮询，则停止
					this.socket.emit('joinConsultation', {
						consultationId: this.consultationId,
						userId: user.id
					});
				});

				// 监听连接错误
				this.socket.on('connect_error', (error) => {
					clearTimeout(this.socketConnectTimeout); // 清除超时
					this.socketConnectTimeout = null;
					console.error('WebSocket连接错误，降级到轮询模式:', error);
					this.fallbackToPolling();
				});
				
				// 接收新消息
				this.socket.on('newMessage', (message) => {
					console.log('收到新消息:', message);
					
					const currentUserId = JSON.parse(uni.getStorageSync('sender') || '{}').id;
					
					// 如果是用户自己发送的消息，检查是否已存在（避免重复显示）
					if (message.SendId === currentUserId) {
						const existingMessage = this.messages.find(msg => 
							msg.Content === message.Content && 
							Math.abs(new Date(msg.CreateDateUtc) - new Date(message.CreateDateUtc)) < 5000 // 5秒内的相同内容消息
						);
						
						if (existingMessage) {
							console.log('检测到重复的用户消息，跳过添加:', message);
							// 更新现有消息的ID和状态（如果需要）
							if (existingMessage.id !== message.id) {
								this.$store.commit('consultation/updateMessageId', {
									tempId: existingMessage.id,
									serverMessage: message
								});
							}
							return;
						}
					}
					
					// 添加新消息
					this.$store.commit('consultation/addMessage', message);
					
					// 如果是AI消息，停止输入提示
					if (message.SendId === 0) {
						this.aiTyping = false;
					}
					
					// 确保滚动到底部（使用nextTick确保DOM更新后再滚动）
					this.$nextTick(() => {
						this.scrollToBottom();
					});
				});
				
				// 监听消息发送确认
				this.socket.on('messageConfirm', (data) => {
					console.log('消息发送确认:', data);
					// 可以在这里更新消息状态，比如将临时ID替换为服务器ID
					if (data.tempId && data.messageId) {
						this.$store.commit('consultation/updateMessageId', {
							tempId: data.tempId,
							newId: data.messageId
						});
					}
				});
				
				// 监听发送失败
				this.socket.on('sendError', (error) => {
					console.error('消息发送失败:', error);
					this.aiTyping = false;
					this.showError('发送失败: ' + (error.message || '未知错误'));
					
					// 更新对应消息的状态为失败
					if (error.tempId) {
						this.$store.commit('consultation/updateMessageState', {
							messageId: error.tempId,
							state: -1
						});
					}
				});

				// AI输入状态
				this.socket.on('aiTyping', () => {
					this.aiTyping = true;
					this.scrollToBottom();
				});
				this.socket.on('aiStopTyping', () => {
					this.aiTyping = false;
				});

				// 连接断开
				this.socket.on('disconnect', (reason) => {
					console.log('WebSocket连接断开:', reason);
					this.connectionStatus = '连接断开';
					// 根据断开原因决定是重连还是降级
					if (reason !== 'io client disconnect') {
						this.fallbackToPolling();
					}
				});

			} catch (error) {
				clearTimeout(this.socketConnectTimeout); // 清除超时
				this.socketConnectTimeout = null;
				console.error('WebSocket初始化失败，降级到轮询模式:', error);
				this.fallbackToPolling();
			}
		},

		// 降级到轮询模式
		fallbackToPolling() {
			if (this.connectionStatus === '在线(轮询)') {
				return; // 防止重复执行
			}
			console.log('启用HTTP轮询模式');
			this.connectionStatus = '在线(轮询)';

			if (this.socket) {
				this.socket.disconnect();
				this.socket = null;
			}
			
			if (this.socketConnectTimeout) {
				clearTimeout(this.socketConnectTimeout);
				this.socketConnectTimeout = null;
			}

			this.startMessagePolling();
		},
		
		// 开始消息轮询（降级方案）
		startMessagePolling() {
			if (this.refreshTimer) return;
			
			this.refreshTimer = setInterval(() => {
				this.loadMessages();
			}, 3000); // 每3秒刷新一次
		},

		// 停止消息轮询
		stopMessagePolling() {
			if (this.refreshTimer) {
				clearInterval(this.refreshTimer);
				this.refreshTimer = null;
			}
		},

		// 断开WebSocket连接
		disconnectWebSocket() {
			if (this.socket) {
				this.socket.disconnect();
				this.socket = null;
			}
			this.stopMessagePolling();
			if (this.socketConnectTimeout) {
				clearTimeout(this.socketConnectTimeout);
				this.socketConnectTimeout = null;
			}
			this.connectionStatus = '已断开';
		},

		// 尝试重连
		attemptReconnect() {
			if (this.reconnectAttempts >= this.maxReconnectAttempts) {
				this.connectionStatus = '连接失败';
				return;
			}
			
			this.reconnectAttempts++;
			this.connectionStatus = `重连中(${this.reconnectAttempts}/${this.maxReconnectAttempts})`;
			
			setTimeout(() => {
				if (!this.socket || !this.socket.connected) {
					this.disconnectWebSocket();
					this.connectWebSocket();
				}
			}, 2000 * this.reconnectAttempts); // 递增延迟重连
		},

		// 输入框事件
		onInputFocus() {
			setTimeout(() => {
				this.scrollToBottom();
			}, 300);
		},

		onInputBlur() {
			// 输入框失焦处理
		},

		onInput() {
			// 输入内容变化处理
		},

		// 滚动到底部
		scrollToBottom() {
			this.$nextTick(() => {
				// 使用更大的数值确保滚动到底部，并使用交替值确保每次都能触发滚动
				this.scrollTop = this.scrollTop === 999999 ? 999998 : 999999;
			});
		},

		// 格式化消息时间
		formatMessageTime(timeStr) {
			if (!timeStr) return '';
			
			const date = new Date(timeStr);
			const now = new Date();
			const diff = now - date;
			
			if (diff < 60 * 1000) {
				return '刚刚';
			} else if (diff < 60 * 60 * 1000) {
				return `${Math.floor(diff / (60 * 1000))}分钟前`;
			} else {
				return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
			}
		},

		// 返回上一页
		goBack() {
			uni.navigateBack();
		},

		// 显示错误消息
		showError(message) {
			uni.showToast({
				title: message,
				icon: 'none'
			});
		},

		// 图片加载成功
		onImageLoad(e) {
			console.log('图片加载成功:', e);
		},

		// 图片加载失败
		onImageError(e) {
			console.log('图片加载失败:', e);
			console.log('图片路径:', e.target.dataset?.src || e.detail?.src || '路径获取失败');
			// console.log('完整事件对象:', JSON.stringify(e, null, 2));
		}
	}
}
</script>

<style scoped lang="scss">
.chat-page {
	height: 100vh;
	background: #f5f5f5;
	display: flex;
	flex-direction: column;
}

.custom-navbar {
	background: white;
	border-bottom: 1rpx solid #e5e5e5;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	
	&.fixed-navbar {
		position: fixed;
	}
	
	.navbar-content {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		position: relative;

		.nav-left {
			width: 80rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.back-button {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				background: #f0f0f0;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.3s ease;

				&:active {
					background: #e0e0e0;
				}

				.back-icon {
					font-size: 32rpx;
					color: #333;
				}
			}
		}

		.nav-center {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			
			.ai-info {
				display: flex;
				align-items: center;
				
				.ai-avatar {
					margin-right: 20rpx;
				}
				
				.ai-details {
					.ai-name {
						font-size: 32rpx;
						font-weight: 500;
						color: #333;
						line-height: 1.2;
					}
					
					.ai-status {
						font-size: 24rpx;
						color: #52c41a;
						line-height: 1.2;
					}
				}
			}
		}
		
		.nav-right {
			width: 80rpx;
		}
	}
}

.message-list {
	flex: 1;
	margin-top: 88rpx; /* 为固定导航栏留出空间 */
}

.welcome-message {
	display: flex;
	justify-content: center;
	padding: 60rpx 0;
	
	.welcome-content {
		background: white;
		border-radius: 20rpx;
		padding: 40rpx;
		max-width: 600rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
		text-align: center;
		
		.welcome-avatar {
			margin-bottom: 30rpx;
		}
		
		.welcome-title {
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
			margin-bottom: 20rpx;
		}
		
		.welcome-subtitle {
			font-size: 28rpx;
			color: #666;
			line-height: 1.6;
		}
	}
}

.loading-more {
	text-align: center;
	padding: 20rpx;
	color: #999;
	font-size: 28rpx;
}

.message-item {
	margin-bottom: 30rpx;
}

.message {
	display: flex;
	align-items: flex-start;
	
	&.ai-message {
		.message-avatar {
			margin-right: 20rpx;
		}
		
		.message-content {
			flex: 1;
			max-width: 70%;
		}
		
		.message-bubble {
			background: white;
			border-radius: 20rpx 20rpx 20rpx 8rpx;
		}
	}
	
	&.user-message {
		// flex-direction: row-reverse;
		justify-content: flex-end;
		
		.message-avatar {
			margin-left: 20rpx;
			flex-shrink: 0;
		}
		
		.message-content {
			flex: 1;
			max-width: 70%;
			text-align: right;
			display: flex;
			flex-direction: column;
			align-items: flex-end;
		}
		
		.message-bubble {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			border-radius: 20rpx 20rpx 8rpx 20rpx;
			margin-left: auto;
		}
		
		.message-status {
			text-align: right;
		}
		
		.message-time {
			text-align: right;
		}
	}
}

.message-avatar {
	flex-shrink: 0;
	border: 2rpx solid #e5e5e5;
	background: #f0f0f0;
	
	&.avatar-sm {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}
	
	&.avatar-md {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}
	
	&.avatar-lg {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}
}

.message-bubble {
	padding: 24rpx 30rpx;
	font-size: 30rpx;
	line-height: 1.5;
	word-break: break-word;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.message-time {
	font-size: 24rpx;
	color: #999;
	margin-top: 10rpx;
}

.message-status {
	font-size: 24rpx;
	margin-bottom: 10rpx;
	
	.status-sending {
		color: #1890ff;
	}
	
	.status-failed {
		color: #ff4757;
		text-decoration: underline;
	}
	
	.status-sent {
		color: #52c41a;
	}
}

.typing-indicator {
	background: white;
	border-radius: 20rpx 20rpx 20rpx 8rpx;
	padding: 24rpx 30rpx;
	display: flex;
	align-items: center;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	
	.typing-dots {
		display: flex;
		margin-right: 20rpx;
		
		.dot {
			width: 8rpx;
			height: 8rpx;
			border-radius: 50%;
			background: #ccc;
			margin-right: 8rpx;
			animation: typing 1.4s infinite ease-in-out;
			
			&:nth-child(1) { animation-delay: -0.32s; }
			&:nth-child(2) { animation-delay: -0.16s; }
			&:nth-child(3) { 
				margin-right: 0;
				animation-delay: 0s; 
			}
		}
	}
	
	.typing-text {
		font-size: 28rpx;
		color: #666;
	}
}

@keyframes typing {
	0%, 80%, 100% {
		transform: scale(0.8);
		opacity: 0.5;
	}
	40% {
		transform: scale(1);
		opacity: 1;
	}
}

.input-area {
	background: white;
	border-top: 1rpx solid #e5e5e5;
	padding: 20rpx;
	
	.input-container {
		display: flex;
		align-items: flex-end;
		
		.input-box {
			flex: 1;
			background: #f5f5f5;
			border-radius: 25rpx;
			padding: 20rpx 30rpx;
			margin-right: 20rpx;
			
			.input-textarea {
				width: 100%;
				font-size: 30rpx;
				line-height: 1.5;
				color: #333;
				background: transparent;
				border: none;
				outline: none;
				resize: none;
			}
		}
		
		.send-btn {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			background: #e5e5e5;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s ease;
			
			&.active {
				background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
				
				.send-icon {
					color: white;
				}
			}
			
			.send-icon {
				font-size: 24rpx;
				color: #999;
			}
		}
	}
}
</style>